<h3 class="popupTitle">Add New Story</h3>

<!-- The preview: -->
<div id="previewNote" class="note yellow" style="left:0;top:65px;z-index:1">
	<div class="author"></div>
	<div style="width:100%; height:16px"></div>
	<div class="body"></div>
	<span class="data"></span>
</div>

<div id="noteData"> <!-- Holds the form -->
<form action="" method="post" class="note-form">

<label for="note-name">Title</label>
<input type="text" name="note-name" id="note-name" class="pr-author" value="" />

<label for="note-body">Text of the story (Up to 180 characters)</label>
<textarea name="note-body" id="note-body" class="pr-body" cols="30" rows="6" maxlength="180">As a(n) ... I want ..., so that ... Done when ...</textarea>

<label>Color</label> <!-- Clicking one of the divs changes the color of the preview -->
<div class="color yellow"></div>
<div class="color blue"></div>
<div class="color green"></div>

<!-- The green submit button: -->
<a id="note-submit" href="#" class="green-button">Save Story</a>
<script type="text/javascript">
/* The submit button: 
	Previously, this was in project.js, but in order to bind it the "live" function
	was used, which is deprecated and caused attached multiple bindings that resulted
	in multiple posts creating the same note over and over.
	
	This script must remain here, or the newer "on" function has to be used back in
	project.js
*/
	$("#note-submit").click(function(e){
		
		if($(".pr-body").val().length<4)
		{
			alert("The story text is too short!")
			return false;
		}
		
		if($(".pr-author").val().length<1)
		{
			alert("You haven't named your story!")
			return false;
		}
		
		

		$(this).replaceWith("<img src=\"images/ajax_load.gif\" style=\"margin:30px auto;display:block\" />");
		
		var data = {
			"zindex"	: ++zIndex,
			"body"		: $(".pr-body").val(),
			"author"	: $(".pr-author").val(),
			"color"		: $.trim($("#previewNote").attr("class").replace("note","").replace("ui-draggable","")), 
			"pname"     : project_name
		};
		
		//$.get("ajax/update_position.php",{"pname" : project_name});
		/* Sending an AJAX POST request: */
		$.post("functions/post.php",data,function(msg){
			//can optionally do something with msg. The auto refresh
			//will take care of adding the new note to the board.
			parent.$.fancybox.close();
		});
		
		e.preventDefault();
	})
	
</script>


</form>
</div>
